<template>
  <div class="tabfix xw-visible">
    <template v-for="(item, index) in btns">
      <a class="xw-flex xw-flex-center xw-flex-column" :class="item.style" @click="getAuditFun(1, item)"
        v-if="item.show">
        <em :class="item.icon" v-if="item.icon"></em><span v-html="item.name" v-if="item.name"></span>
      </a>
    </template>
  </div>
  <layer-view ref="layerBox" />
</template>

<script setup lang="ts">
import { getCurrentInstance, ref } from 'vue'
const { proxy } = getCurrentInstance()
const props = defineProps({
  user: {
    type: Object,
    default: {},
    require: true
  }
})
const layerBox = ref()
const btns = ref([{
  show: true,
  name: '咨询',
  icon: 'fa fass fa-phone-volume',
  style: 'xw-radius-round xw-shadow xw-bg-white xw-color-11',
  callback: () => {
    const options = {
      type: 0,
      content: `<div style="padding: 1rem; line-height: 3rem; font-size: 2rem; font-weight: bold;">科技创新 万众焊接</div>
      <div class="xw-Tfg" style="padding: 1rem 0; line-height: 3rem; font-size: 1.6rem;">
      你可以咨询：<br/>1、万众产品价格<br/>2、产品功能特点<br/>3、如何签约代理<br/>4、如何共享渠道</div>`,
      button: [{
        text: proxy.$Global.layer.btnCancel
      }, {
        text: proxy.$Global.layer.btnAsk,
        class: 'xw-color-24',
        callback: () => {
          window.location.href = 'tel:' + props.user.company_share_hotline
        }
      }]
    }
    proxy.$Myfun.isIndepth(layerBox.value, 'open', options)
  }
}, {
  show: true,
  name: '合作',
  icon: 'fa fa-thin fa-handshake',
  style: 'xw-radius-round xw-shadow xw-bg-white xw-color-11',
  callback: () => {
    const options = {
      type: 0,
      content: `<div style="padding: 1rem; line-height: 3rem; font-size: 2rem; font-weight: bold;">科技创新 万众焊接</div>
      <div class="xw-Tfg" style="padding: 1rem 0; line-height: 3rem; font-size: 1.6rem;">
      合作流程：<br/>第一步：提交合作申请<br/>第二步：上门洽谈签约<br/>第三步：对接客服后勤</div>`,
      button: [{
        text: proxy.$Global.layer.btnCancel
      }, {
        text: '我要合作',
        class: 'xw-color-24',
        callback: () => {
          if (props.user.forRegMem) {
            proxy.$Myfun.openPage(proxy, 'push', 'CapitalUserReg', { id: props.user.regMemId })
          } else {
            const forPower = props.user.power
            switch (Number(forPower)) {
              case 1: {
                proxy.$Myfun.openPage(proxy, 'push', 'CapitalUserReg', { capitalType: 1, })
                break
              }
              case 2: {
                proxy.$Myfun.openPage(proxy, 'push', 'CapitalUserReg')
                break
              }
            }
          }
        }
      }]
    }
    proxy.$Myfun.isIndepth(layerBox.value, 'open', options)
  }
}])
const getAuditFun = async (type, item, event) => {
  switch (Number(type)) {
    case 1: {
      item.callback && item.callback(item)
      break
    }
  }
}
</script>

<style scoped>
.hover_btn {
  position: absolute;
  right: 5vw;
  bottom: 10rem;
}

.border-con {
  margin-bottom: 1rem;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  border: 0.1rem solid #3388ff;
}
</style>